<template>
  <!-- 评价体系 -->
  <div class="interview-talk" >
      <div class="talk-title">
          <span class="title-left">面试评价</span>
      </div>
       <div class="no-text" v-if="comments.length==0">
              <p>暂无面试评价</p>
       </div>
      <div class="interview-request">
          <!-- 每一条评论信息 -->
          <div class="request-item" v-for="(item,index) in comments" :key="index">
              <dl>
                  <dt>
                      <img :src="item.uAvatar"/>
                  </dt>
                  <dd>
                      <div>
                            <p>
                                <span class="dd-p1" v-if="item.isAnonymity">匿名</span>
                                <span class="dd-p1" v-else>{{item.uname}}</span>
                                <!-- 综合评价 -->
                                <!-- <el-rate v-model="value3" disabled text-color="#ff9900" score-template="{value}">
                                </el-rate> -->
                            </p>
                            <!-- 面试职位 -->
                            <span  class="position-total">面试职位:<i>{{item.interviewPosition}}</i></span>

                      </div>
                      <p class="dd-p3">
                          <span>[面试过程]</span>
                          <span>{{item.contents}}</span>
                      </p>
                      <div class="dd-p4">
                          <span>{{item.str_addtime}}</span>
                         <!-- <span>
                                <svg class="icon price-bottom-01" aria-hidden="true">
                                    <use xlink:href="#icon-like"></use>
                                 </svg>

                                (&nbsp;<i class="heart-amount">0</i>&nbsp;)
                          </span> -->
                      </div>
                  </dd>

              </dl>

          </div>
        <div v-show="loading" class="page-infinite-loading">
          <mt-spinner type="fading-circle"></mt-spinner>
          加载中...
        </div>
        <div v-show="allLoaded" class="page-infinite-data">亲！别拉了我是有底线的</div>
      </div>
  </div>
</template>

<script>
import {GetComment} from "@/api/zgz";
export default {
  props: ["pindex", "ptalk", "cindex", "pd"],
  data() {
    return {
      flag: true,
      value1: 3.7,
      value2: 3.5,
      value3: 4.0,
      value4: 4.5,
      comments:"",
      pageindex:1,
      totalpage:0,
      loading: false, //是否显示加载中
      allLoaded: false, //加载完毕
    };
  },
  props: {
    id: Number
  },
  created() {
     this.initialization();
    if (this.pindex === "true" || this.cindex == "true" || this.pd == "true") {
      this.flag = false;
      return;
    }
    if (this.ptalk == "true") {
      this.flag = true;
      return;
    }
    
  },
  methods: {
    handleclick(e) {
      $(".position-class")
        .children("ul")
        .children("li")
        .each(function(index) {
          $(".position-class")
            .children("ul")
            .children("li")
            .eq(index)
            .removeClass("active");
        });
      var target = e.target || e.srcElement;
      if (target.tagName !== "UL") {
        $(target).addClass("active");
      }
    },
     //初始化
    initialization() {
      this.$indicator.open();
      setTimeout(() => {
        GetComment(this.id,this.pageindex).then(res => {
          if (res.StatusCode === 200) {
            this.comments=res.Data;
            this.$indicator.close();
          }
        });
      }, 400);
    },
     loadMore() {
      //分页加载更多
      if (this.pageindex >= this.totalpage) {
          this.allLoaded = true;
          return;
        }
        this.loading = true;
        setTimeout(() => {
          this.pageindex++;
          GetComment(this.id,this.pageindex).then(res => {
            if (res.StatusCode === 200) {
              this.comments = this.comments.concat(res.Data);
            }
          });
          this.loading = false;
        }, 1000);
    },
  }
};
</script>
  

<style lang="scss" scoped>
// 本组件通用样式
.icon {
  display: block;
  float: left;
  margin-right: 3px;
  margin-top: 3px;
}
i {
  font-style: normal;
}
// 评价体系
.interview-talk {
  padding-bottom: 23px;
  border-bottom: 40px solid #f4f4f4;
  .talk-title {
    height: 58.3px;
    width: 100%;
    padding-left: 12px;
    border-bottom: 1px solid #eeeeee;
    overflow: hidden;
    .title-left {
      line-height: 58.3px;
      font-size: 16px;
      color: #282828;
      font-weight: #282828;
      display: inline-block;
      float: left;
      font-weight: bolder;
    }
    .title-right {
      display: inline-block;
      float: right;
      line-height: 58.3px;
      margin-right: 12px;
      font-size: 12px;
      color: #999999;
      > span {
        display: block;
        float: left;
      }
      > .icon {
        display: block;
        float: left;
        margin-top: 22px;
      }
    }
  }
  .star-system {
    padding: 23px 12px 0px 12px;
    border-bottom: 1px solid #f4f4f4;
    .star-p1 {
      color: #666666;
      font-size: 16px;

      overflow: hidden;
      display: flex;
      align-items: center;
      //来自99份评价
      .requst-total {
        margin-left: 5px;
        color: #999999;
        font-size: 12px;
      }
    }
    .star-p2 {
      font-size: 13px;
      display: flex;
      flex-wrap: wrap;
      margin-top: 15px;
      > p {
        color: #666666;
        margin-bottom: 14px;
        display: flex;
        align-items: center;
        > :first-child {
          text-align: left;
          font-size: 14px;
          width: 70px;
        }
      }
    }
  }
}
// 职位类别
.position-class {
  width: 100%;
  overflow: hidden;
  font-size: 12px;
  padding: 22px 12px;
  background: #f4f4f4;
  > div {
    float: left;
    color: #666666;
    margin-right: 13px;
    margin-top: 5.595px;
    font-size: 14px;
  }
  > ul {
    float: left;
    color: #282828;

    li {
      float: left;
      padding: 5.6px 10px;
      font-size: 14px;
    }
    .active {
      background: #fd4f00;
      color: #ffffff;
    }
  }
}
// 评论列表
.interview-request {
  padding-left: 9px;
  padding-right: 9px;
  padding-bottom: 16px;

  .request-item {
    padding-bottom: 22px;
    border-bottom: 1px dashed #cccccc;
   
    > dl {
      overflow: hidden;
      margin-top:10px;
      dt {
        float: left;
        width: 44px;
        height: 44px;

        > img {
          max-height: 100%;
          max-width: 100%;
          vertical-align: middle;
        }
      }
      dd {
        float: left;
        margin-left: 14px;
        margin-top: 7px;
        width: 335.6px;
        > :first-child {
          overflow: hidden;
          margin-bottom: 13px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          p {
            display: flex;
            align-items: center;
          }

          .dd-p1 {
            color: #282828;
            font-size: 16px;
            margin-right: 12px;
          }
          .dd-p2 {
            margin-right: 7.3px;
            font-size: 14px;
            margin-top: 3px;
          }
          .position-total {
            float: right;
            color: #666666;
            font-size: 14px;

            > i {
              font-style: normal;
              padding-left: 7px;
              color: #999999;
            }
          }
        }
        .dd-p2 {
          overflow: hidden;
          margin-bottom: 11px;
          > span {
            font-size: 14px;
            display: block;
            float: left;
            color: #fd4f00;
            margin-right: 10px;
            padding: 1px 3.5px;
            border: 1px solid #fd4f00;
          }
        }
        .dd-p3 {
          font-size: 14px;
          margin-bottom: 15px;
          > :first-child {
            color: #666666;
          }
          > :last-child {
            color: #999999;
          }
        }
        .dd-p4 {
          color: #666666;
          overflow: hidden;
          > span {
            display: block;
            float: left;
            font-size: 14px;
          }
          > :last-child {
            float: right;
            color: #999999;
            > .icon {
              display: block;
              float: left;
              margin-top: 0.5px;
              margin-right: 8px;
              font-size: 20px !important;
              > i {
                display: inline-block;

                font-size: 16px !important;
              }
            }
          }
        }
      }
    }
  }
}
</style>

